<template>
    <div class="Company">
        <!-- 头部 -->
        <Header :navActive="-1" ref="Header"/>
        <!-- 主内容区 -->
        <div class="main cl">
            <div class="banner">
                <div class="w1200">
                    <div class="left fl">
                        <div class="logo"><img :src="info.enLogo_dictText"></div>
                        <div class="text">
                            <div class="name">{{ info.enName }}</div>
                            <div class="other">
                                <span v-if="info.enNature">{{ info.enNature }}</span>
                                <span v-if="info.enPersonnel">{{ info.enPersonnel }}人</span>
                                <span v-if="info.enTrade_dictText">{{ info.enTrade_dictText }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="right fr">
                        <div class="jobs">
                            <div class="num">{{ info.postNum }}</div>
                            <div class="t">在招职位</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block w1200">
                <div class="title">招聘职位</div>
                <!-- 筛选 -->
                <div class="filter">
                    <div class="row" v-for="(item,index) in filter" :key="index">
                        <!-- 城市 -->
                        <template v-if="item.id=='1330751004775944193'">
                            <div class="label">{{ item.name }}</div>
                            <div class="list">
                                <span :class="filterActive[index].id==''?'active':''"
                                      @click="selectFilter(index,'')">不限</span>
                                <span v-for="(x,y) in item.blockData" :key="y"
                                      :class="filterActive[index].id==x.sourceId?'active':''"
                                      @click="selectCity(index,y,x.sourceId)">{{ x.title }}
                                    <i :class="filterActive[index].id==x.sourceId&&jobCityChild.length>0&&filterActive[index].childrenActive?'el-icon-arrow-down active':'el-icon-arrow-down'"></i>
                                </span>
                                <div class="dlist" v-if="jobCityChild.length>0&&filterActive[index].childrenActive">
                                    <div class="ditem" :class="jobCity2Active==''?'active':''"
                                         @click="selectCity2(index,'')">不限
                                    </div>
                                    <div class="ditem" v-for="(item,index) in jobCityChild" :key="index"
                                         :class="jobCity2Active==item.value?'active':''"
                                         @click="selectCity2(index,item.value)">{{ item.label }}
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="label">{{ item.name }}</div>
                            <div class="list">
                                <span :class="filterActive[index].id==''?'active':''"
                                      @click="selectFilter(index,'')">不限</span>
                                <span v-for="(x,y) in item.blockData" :key="y"
                                      :class="filterActive[index].id==x.sourceId?'active':''"
                                      @click="selectFilter(index,x.sourceId)">{{ x.title }}</span>
                            </div>
                        </template>
                    </div>
                </div>
                <!-- 列表 -->
                <div class="list">
                    <div class="item" v-for="(item,index) in list" :key="index">
                        <router-link :to="{name:'JobDetails',query:{id:item.id}}" target="_blank">
                            <div class="title">{{ item.title }} <span>发布时间：{{ item.publishTime }}</span></div>
                            <div class="other">
                                <div class="money">{{ item.money }}</div>
                                <div class="spans">
                                    <span>{{ item.jobCity_dictText }}</span>
                                    <span>{{ item.eduLevel_dictText }}</span>
                                    <span>{{ item.experience }}</span>
                                    <span>{{ item.needCount }}人</span>
                                </div>
                            </div>
                            <div class="company">
                                <div class="text fl">
                                    <div class="companyName">{{ item.companyName }}</div>
                                    <div class="companyOther">
                                        <span>{{ item.enNature }}</span>
                                        <span v-if="item.enPersonnel_dictText">{{ item.enPersonnel_dictText }}</span>
                                    </div>
                                </div>
                                <div class="logo fr">
                                    <img :src="item.companyLogo_dictText">
                                </div>
                            </div>
                            <div class="fu">
                                <span v-for="(x,y) in item.companyBenefits" :key="y">{{ x }}</span>
                            </div>
                        </router-link>
                        <div class="hover">
                            <el-button type="primary" class="submit" @click="SendResume(item.id)">申请职位</el-button>
                            <el-button type="text" icon="el-icon-star-off" class="collect"
                                       @click="collectionDelete(item.id)" v-if="item.collectState==0">取消收藏
                            </el-button>
                            <el-button type="text" icon="el-icon-star-off" class="collect"
                                       @click="collectionAdd(item.id)" v-else>收藏职位
                            </el-button>
                        </div>
                    </div>
                </div>
                <!-- 暂无数据 -->
                <nodata v-if="list.length==0"/>
                <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo"
                               :page-size='pageSize' :total="pageTotal"
                               @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>
        <!-- 底部 -->
        <Footer/>
    </div>
</template>

<script>
import {baseData, baseSearch, block, collectStateList, companyIndex} from '@/api/api'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import nodata from '@/components/nodata.vue'

export default {
    //组件注入
    components: {Header, Footer, nodata},
    //存放数据
    data() {
        return {
            info: {},
            search: {
                recruitType: '',//招聘类型 0 社招, 1 校招,
                jobCity: '',//工作地点
                experience: [],//工作经验
                eduLevel: '',//学历要求
                enPersonnel: '',//公司规模
                money: [],//薪资范围
            },
            filter: [],
            filterActive: [],
            city: [],//所有城市
            jobCityChild: [],//城市二级
            jobCity2Active: '',//城市二级active
            pageNo: 1,
            pageSize: 10,
            pageTotal: 1,//总数
            list: [],
        }
    },
    //接受父组件传递的值
    props: [],
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        //筛选条件
        selectFilter(index, id) {
            this.filterActive[index].id = id;
            if (index == 0) {
                this.search.recruitType = id
            }
            if (index == 1) {
                if (id == '') {
                    this.search.jobProvince = ''
                    this.search.jobCity = ''
                    this.jobCityChild = []
                }
            }
            if (index == 2) {
                this.search.experience = id
            }
            if (index == 3) {
                this.search.eduLevel = id
            }
            if (index == 4) {
                this.search.money = id
            }
            this.clearList()
            this.getList()
        },
        //选择城市一级
        selectCity(parIndex, index, id) {
            if (this.filterActive[parIndex].id != id) {
                this.filterActive[parIndex].childrenActive = true;
                this.search.jobProvince = id
                this.search.jobCity = ''
                this.jobCity2Active = ''
                this.clearList()
                this.getList()
            } else {
                this.filterActive[parIndex].childrenActive = !this.filterActive[parIndex].childrenActive;
            }
            this.filterActive[parIndex].id = id;
            this.jobCityChild = this.city.filter(item => item.value == id)[0].children
        },
        //选择城市二级
        selectCity2(parIndex, id) {
            console.log(parIndex, id)
            if (id == '') {
                this.search.jobProvince = this.filterActive[parIndex].id
                this.search.jobCity = ''
            } else {
                this.search.jobCity = id
            }
            this.jobCity2Active = id
            this.clearList()
            this.getList()
        },
        //收藏职位
        collectionAdd(id) {
            if (this.userLoginFlag()) {
                collectionAdd({
                    'jobId': id
                }).then(res => {
                    if (res.code == 200) {
                        this.$message.success('收藏成功');
                        for (let i in this.list) {
                            if (this.list[i].id == id) {
                                this.list[i].collectState = 0
                            }
                        }
                    } else {
                        this.$message.error(res.message);
                    }
                });
            }
        },
        //取消收藏职位
        collectionDelete(id) {
            if (this.userLoginFlag()) {
                collectionDelete({
                    'id': id
                }).then(res => {
                    if (res.code == 200) {
                        this.$message.success('取消收藏成功');
                        for (let i in this.list) {
                            if (this.list[i].id == id) {
                                this.list[i].collectState = 1
                            }
                        }
                    } else {
                        this.$message.error(res.message);
                    }
                });
            }
        },
        //投递简历
        SendResume(id) {
            if (this.userLoginFlag()) {
                this.$refs.Header.SendResumeFlag = true
                this.$refs.Header.JobId = id
            }
        },
        //清空列表
        clearList() {
            this.pageNo = 1
            this.list = []
        },
        //获取列表
        getList() {
            baseSearch({
                'type': 'job',
                'companyId.term': this.id,//搜索内容
                'recruitType.term': this.search.recruitType,//招聘类型 0 社招, 1 校招,
                'jobProvince.term': this.search.jobProvince,
                'jobCity.term': this.search.jobCity,//工作地点
                'jobIndustryId.term': this.search.jobIndustryId,//所属行业
                'experience.range': this.search.experience,//工作经验
                'eduLevel.term': this.search.eduLevel,//学历要求
                'enNature.term': this.search.enNature,//公司性质
                'enPersonnel.term': this.search.enPersonnel,//公司规模
                'money.range': this.search.money,//薪资范围
                //'bsType.keywords':0,//职位搜索
                'pageNo': this.pageNo,
                'pageSize': this.pageSize,
                'field': this.fieldType,//排序字段 intellect 智能排序
                'sort': false,//排序方式 true:正序 false:倒序
            }).then(res => {
                if (res.code == 200) {
                    this.pageTotal = res.result.total
                    let list = res.result.records
                    for (let i in list) {
                        list[i].money = list[i].minMoney / 1000 + 'K-' + list[i].maxMoney / 1000 + 'K'
                        if (list[i].minExperience == 0 && list[i].maxExperience == 0) {
                            list[i].experience = '无经验'
                        } else if (list[i].minExperience == 0 && list[i].maxExperience == 999) {
                            list[i].experience = '不限'
                        } else if (list[i].minExperience == null && list[i].maxExperience == null) {
                            list[i].experience = '无经验'
                        } else {
                            list[i].experience = list[i].minExperience + '-' + list[i].maxExperience + '年'
                        }
                    }
                    //判断登录状态 查询收藏状态
                    if (list.length > 0 && this.userLoginFlag1()) {
                        let ids = ''
                        for (let i in list) {
                            ids += list[i].id + ','
                        }
                        //收藏状态
                        collectStateList({
                            'jobId': ids
                        }).then(res => {
                            if (res.code == 200) {
                                for (let i in res.result) {
                                    list[i].collectState = res.result[i].collectState
                                }
                                this.list = list
                            }
                        });
                    } else {
                        this.list = list
                    }
                }
            });
        },
        //切换页码
        handleCurrentChange(pageNo) {
            this.pageNo = pageNo
            this.list = []
            this.getList();
            document.querySelector('#tabs').scrollIntoView(true)
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.id = this.$route.query.id
        //公司主页
        companyIndex({
            'id': this.id
        }).then(res => {
            if (res.code == 200) {
                this.info = res.result
                if (this.info.otherWelfare) {
                    this.info.otherWelfare = this.info.otherWelfare.split(',')
                }
                //获取列表
                this.getList();
            } else {
                this.$message.error(res.message);
            }
        });
        //获取筛选条件
        block({
            'code': 'search'
        }).then(res => {
            if (res.code == 200) {
                let arr = res.result.children
                for (let i in arr) {
                    if (arr[i].name != '所属行业') {
                        if (arr[i].name != '公司性质') {
                            if (arr[i].name != '公司规模') {
                                this.filter.push(arr[i])
                                this.filterActive.push({id: "", childrenActive: false})
                            }
                        }
                    }
                }
            }
        });
        //城市列表
        baseData({
            'clz': 'area'
        }).then(res => {
            if (res.code == 200) {
                this.city = res.result
            }
        });
    }
};
</script>
<style lang="scss">
@mixin text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin text-ellipsisclamp($clamp) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $clamp;
    overflow: hidden;
}

@mixin transition {
    transition: all .3s;
}

.Company {
    background: #F6F6F6;

    .main {
        height: auto;
        padding-bottom: 40px;
        position: relative;
        z-index: 0;

        .banner {
            width: 100%;
            height: 260px;
            background: url('../../assets/company-bg.jpg') center no-repeat;
            background-size: cover;
            padding: 80px 0;

            .left {
                height: auto;
                overflow: hidden;

                .logo {
                    width: 100px;
                    height: 100px;
                    overflow: hidden;
                    float: left;
                    margin-right: 25px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .text {
                    height: auto;
                    overflow: hidden;
                    padding-top: 10px;

                    .name {
                        font-size: 30px;
                        color: #333;
                    }

                    .other {
                        height: auto;
                        overflow: hidden;
                        margin-top: 15px;

                        span {
                            font-size: 14px;
                            color: #333;
                            display: inline-block;
                            padding-right: 15px;
                            position: relative;
                            margin-right: 15px;

                            &:after {
                                content: "";
                                width: 1px;
                                height: 11px;
                                background: #A29C9C;
                                position: absolute;
                                right: 0;
                                top: 5px;
                            }

                            &:last-child:after {
                                display: none;
                            }
                        }
                    }
                }
            }

            .right {
                height: auto;
                overflow: hidden;
                padding-top: 20px;

                .jobs {
                    height: auto;
                    overflow: hidden;
                    font-weight: bold;
                    color: #333;
                    text-align: center;
                    padding-top: 10px;

                    .num {
                        font-size: 24px;
                        margin-bottom: 3px;
                    }

                    .t {
                        font-size: 16px;
                    }
                }
            }
        }

        .block {
            padding-top: 30px;

            .title {
                height: 26px;
                line-height: 26px;
                font-size: 20px;
                color: #333;
                font-weight: bold;
                position: relative;
                padding-left: 20px;
                margin-bottom: 20px;

                .more {
                    font-size: 14px;
                    color: #777;
                    float: right;
                    font-weight: normal;

                    &:hover {
                        color: #E54437;
                    }
                }

                &:before {
                    content: "";
                    width: 6px;
                    height: 20px;
                    background: #E54437;
                    position: absolute;
                    left: 0;
                    top: 3px;
                }
            }

            .filter {
                height: auto;
                overflow: hidden;
                background: #fff;
                padding: 30px;
                margin-bottom: 30px;

                .row {
                    height: auto;
                    overflow: hidden;
                    margin-bottom: 10px;

                    .label {
                        width: 60px;
                        line-height: 28px;
                        float: left;
                        font-size: 14px;
                        color: #999;
                    }

                    .list {
                        width: 1080px;
                        height: auto;
                        overflow: hidden;
                        float: left;

                        span {
                            height: 28px;
                            line-height: 28px;
                            font-size: 14px;
                            color: #333;
                            padding: 0 12px;
                            border-radius: 3px;
                            display: inline-block;
                            margin: 0 0 10px 10px;
                            cursor: pointer;
                            @include transition();

                            &:hover {
                                color: #E54437;
                            }

                            &.active {
                                background: #E54437;
                                color: #fff;

                                i.active {
                                    transform: rotate(180deg);
                                }
                            }

                            i {
                                font-size: 10px;
                                margin-left: 5px;
                                vertical-align: 1px;
                            }
                        }

                        .dlist {
                            background: #f6f6f6;
                            margin: 0 0 10px 10px;
                            padding: 20px 10px 10px;

                            .ditem {
                                line-height: 28px;
                                font-size: 14px;
                                color: #333;
                                padding: 0 12px;
                                border-radius: 3px;
                                display: inline-block;
                                margin: 0 0 10px 10px;
                                cursor: pointer;
                                @include transition();

                                &:hover {
                                    color: #E54437;
                                }

                                &.active {
                                    background: #E54437;
                                    color: #fff;
                                }
                            }
                        }
                    }

                    &:last-child {
                        margin: 0;
                    }
                }
            }

            /* 列表 */
            .list {
                height: auto;
                overflow: hidden;
                background: #fff;

                .item {
                    height: auto;
                    overflow: hidden;
                    padding: 20px;
                    display: block;
                    border-bottom: 1px solid #eee;
                    position: relative;

                    a {
                        display: block;
                    }

                    .title {
                        font-size: 16px;
                        color: #333;
                        font-weight: bold;

                        span {
                            font-size: 14px;
                            color: #999;
                            margin-left: 20px;
                            font-weight: normal;
                        }
                    }

                    .other {
                        height: auto;
                        overflow: hidden;
                        margin-top: 13px;

                        .money {
                            font-size: 20px;
                            color: #E72618;
                            float: left;
                            margin-right: 35px
                        }

                        .spans {
                            height: auto;
                            overflow: hidden;

                            span {
                                font-size: 14px;
                                color: #666666;
                                position: relative;
                                padding-right: 12px;
                                margin-left: 12px;

                                &:after {
                                    content: "";
                                    width: 1px;
                                    height: 12px;
                                    background: #e8e8e8;
                                    position: absolute;
                                    right: 0;
                                    top: 2px;
                                }

                                &:first-child {
                                    margin: 0;
                                }

                                &:last-child:after {
                                    display: none;
                                }
                            }
                        }
                    }

                    .company {
                        height: auto;
                        overflow: hidden;
                        position: absolute;
                        right: 30px;
                        top: 35px;

                        .text {
                            height: auto;
                            overflow: hidden;
                            margin-right: 23px;
                            padding-top: 10px;
                            text-align: right;

                            .companyName {
                                font-size: 14px;
                                color: #666;
                                font-weight: bold;
                                @include text-ellipsis()
                            }

                            .companyOther {
                                margin-top: 5px;

                                span {
                                    font-size: 13px;
                                    color: #666;
                                    position: relative;
                                    padding-left: 12px;
                                    margin-left: 12px;

                                    &:after {
                                        content: "";
                                        width: 1px;
                                        height: 12px;
                                        background: #e8e8e8;
                                        position: absolute;
                                        left: 0;
                                        top: 3px;
                                    }

                                    &:first-child {
                                        margin: 0;
                                    }

                                    &:first-child:after {
                                        display: none;
                                    }
                                }
                            }
                        }

                        .logo {
                            width: 60px;
                            height: 60px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                    .fu {
                        height: 25px;
                        overflow: hidden;
                        margin-top: 15px;

                        span {
                            font-size: 12px;
                            color: #74767A;
                            border: 1px solid #eee;
                            padding: 2px 8px 3px;
                            margin: 0 0 8px 8px;
                            background: #F9F9F9;
                            float: left;

                            &:first-child {
                                margin: 0;
                            }
                        }
                    }

                    .hover {
                        width: 400px;
                        height: 100%;
                        padding: 50px 0;
                        position: absolute;
                        background: #fff;
                        right: 0;
                        top: 0;
                        display: none;

                        .el-button {
                            height: 40px;
                            padding: 0 20px;
                            float: right;
                            margin-right: 30px;
                            border-radius: 5px !important;
                        }

                        .collect {
                            color: #999;
                            @include transition();

                            i {
                                font-size: 18px;
                                vertical-align: -1px;
                            }

                            &:hover {
                                color: #E54437;
                            }
                        }
                    }

                    &:hover {
                        .hover {
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
</style>